<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="down_block">
    <!---------------------------|导航树 -->
    <div class="down_block_left">
      <NAnchor
        :show-rail="false"
        ref="anchorRef"
        style="z-index: 1"
        v-for="(BlockGroupItem, BlockGroupIndex) in Store.blockGroup"
        :key="BlockGroupIndex"
      >
        <NAnchorLink
          :title="BlockGroupItem.label"
          :href="'#' + BlockGroupItem.key"
          @click.stop="onSelectedBlockGroup(BlockGroupItem)"
        />
      </NAnchor>
    </div>
    <!---------------------------|工具按钮 -->
    <div class="down_block_tool">
      <div style="width: 5px"></div>
      <div class="h_flex_column_around">
        <!-- 导入 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg
              class="h_svg_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              :width="IconSize"
              :height="IconSize"
              viewBox="0 0 1024 1024"
              v-html="onGetDataManagerIcon('fileLeadingInIcon')"
              @click="onOpenFileDialog()"
            ></svg>
          </template>
          <span>导入块</span>
        </NTooltip>
        <!-- 导出 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg
              class="h_svg_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              :width="IconSize"
              :height="IconSize"
              viewBox="0 0 1024 1024"
              v-html="onGetDataManagerIcon('fileLeadingOutIcon')"
              @click="onLeadOutJSON()"
            ></svg>
          </template>
          <span>导出块</span>
        </NTooltip>
      </div>
      <div style="width: 20px"></div>
      <div class="h_flex_column_around">
        <!-- 下载 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg
              class="h_tool_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              :width="IconSize"
              :height="IconSize"
              viewBox="0 0 1024 1024"
              v-html="onGetDataManagerIcon('dataSetGetIcon')"
              @click.stop="onBlockGroupGet()"
            ></svg>
          </template>
          <span>下载块组</span>
        </NTooltip>
        <!-- 上载 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg
              class="h_tool_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              :width="IconSize"
              :height="IconSize"
              viewBox="0 0 1024 1024"
              v-html="onGetDataManagerIcon('dataSetSaveIcon')"
              @click.stop="onBlockGroupSave()"
            ></svg>
          </template>
          <span>上载块组</span>
        </NTooltip>
        <!-- 新建 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg
              class="h_tool_icon"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1"
              :width="IconSize"
              :height="IconSize"
              viewBox="0 0 1024 1024"
              v-html="onGetDataManagerIcon('dataSetAddIcon')"
              @click.stop="onBlockGroupAdd()"
            ></svg>
          </template>
          <span>新建块组</span>
        </NTooltip>
      </div>
    </div>
    <!---------------------------|属性 -->
    <div class="down_block_right">
      <div
        class="h_flex_column"
        style="margin-right: 16px"
        v-for="(BlockGroupItem, BlockGroupIndex) in Store.blockGroup"
        :key="BlockGroupIndex"
      >
        <!-- 块组管理 -->
        <n-divider :id="BlockGroupItem.key" title-placement="left">{{
          BlockGroupItem.label
        }}</n-divider>
        <div class="h_block_neme">
          <text style="width: 100px">块组名称</text>
          <NInput
            class="h_info_val"
            type="text"
            v-model:value="BlockGroupItem.label"
            placeholder="未选择，请选择块"
          />
          <!-- 删除块组 -->
          <div style="width: 20px"></div>
          <NTooltip placement="bottom" trigger="hover">
            <template #trigger>
              <svg
                class="h_tool_icon"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                version="1.1"
                :width="IconSize"
                :height="IconSize"
                viewBox="0 0 1024 1024"
                v-html="onGetDataManagerIcon('dataSetDeleteIcon')"
                @click.stop="onBlockGroupDelete(BlockGroupItem.key)"
              ></svg>
            </template>
            <span>删除块组</span>
          </NTooltip>
          <!-- 插入块 -->
          <div style="width: 20px"></div>
          <NTooltip placement="bottom" trigger="hover">
            <template #trigger>
              <svg
                class="h_tool_icon"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                version="1.1"
                :width="IconSize"
                :height="IconSize"
                viewBox="0 0 1024 1024"
                v-html="onGetDataManagerIcon('dataInsertIcon')"
                @click.stop="onBlockInsert(BlockGroupItem.key)"
              ></svg>
            </template>
            <span>插入块</span>
          </NTooltip>
          <!-- 选择 -->
          <div style="width: 20px"></div>
          <NTooltip placement="bottom" trigger="hover">
            <template #trigger>
              <svg
                class="h_tool_icon"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                version="1.1"
                :width="IconSize"
                :height="IconSize"
                viewBox="0 0 1024 1024"
                v-html="onGetDataManagerIcon('dataSetSelectedIcon')"
                @click.stop="onSelectedBlockGroup(BlockGroupItem)"
              ></svg>
            </template>
            <span>选择块组</span>
          </NTooltip>
        </div>
        <!-- 块管理 -->
        <div v-if="BlockGroupItem.children.length > 0">
          <div v-for="(BlockItem, BlockIndex) in BlockGroupItem.children">
            <div class="block_children">
              <text style="width: 100px">块名称</text>
              <NInput type="text" v-model:value="BlockItem.label" />
              <!-- 剪切块 -->
              <div style="width: 20px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg
                    class="h_tool_icon"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    version="1.1"
                    :width="IconSize"
                    :height="IconSize"
                    viewBox="0 0 1024 1024"
                    v-html="onGetDataManagerIcon('dataCutIcon')"
                    @click.stop="onBlockCut(BlockItem)"
                  ></svg>
                </template>
                <span>剪切块</span>
              </NTooltip>
              <!-- 复制块 -->
              <div style="width: 20px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg
                    class="h_tool_icon"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    version="1.1"
                    :width="IconSize"
                    :height="IconSize"
                    viewBox="0 0 1024 1024"
                    v-html="onGetDataManagerIcon('dataCopyIcon')"
                    @click.stop="onBlockCopy(BlockItem)"
                  ></svg>
                </template>
                <span>复制块</span>
              </NTooltip>
              <!-- 删除块 -->
              <div style="width: 20px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg
                    class="h_tool_icon"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    version="1.1"
                    :width="IconSize"
                    :height="IconSize"
                    viewBox="0 0 1024 1024"
                    v-html="onGetDataManagerIcon('dataDeleteIcon')"
                    @click.stop="onBlockDelete(BlockItem.key)"
                  ></svg>
                </template>
                <span>删除块</span>
              </NTooltip>
              <!-- 选择块 -->
              <div style="width: 20px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg
                    class="h_tool_icon"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    version="1.1"
                    :width="IconSize"
                    :height="IconSize"
                    viewBox="0 0 1331 1024"
                    v-html="onGetDataManagerIcon('dataPreviewIcon')"
                    @click.stop="onSelectedBlock(BlockItem)"
                  ></svg>
                </template>
                <span>选择块</span>
              </NTooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 文件导入 -->
    <input type="file" style="display: none" ref="fileRef" @change="onLeadingIn" />
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetDataManagerIcon,
  onSelectedBlockGroup, //选择当前块组
  onBlockGroupGet, // 下载块组
  onBlockGroupSave, // 上载块组
  onBlockGroupAdd, // 新建块组
  onBlockGroupDelete, // 删除块组
  onBlockCut, // 剪切块
  onBlockCopy, // 复制块
  onBlockInsert, // 插入块
  onBlockDelete, // 删除块
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { saveAs } from "file-saver";
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useMenuStore } from "@/store/menuStore"; // 菜单
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布

/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 存储 */
let Store = reactive({
  /** 块组*/
  blockGroup: computed(() => canvasStore.blockGroup),
});
/** 图标尺寸 */
const IconSize = 36;
/** 文件参数 */
let fileRef = ref();

/* ================================================================================================ */
//                                函数 ★
/* ================================================================================================ */
/** 打开文件对话框 */
const onOpenFileDialog = () => {
 // console.log("打开文件对话框");
 // console.log(fileRef.value);
  fileRef.value.dispatchEvent(new MouseEvent("click"));
};

/**  导入 */
const onLeadingIn = async () => {
 // console.log("图元数据-导入");
 // console.log(fileRef)
 // console.log(fileRef.value.files[0])
  // 读取文件
  const file = fileRef.value.files[0];
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    // 解析JSON
    const jsonData = JSON.parse(reader.result);
   // console.log(jsonData);
    if (jsonData.type === "blockGroup") {
      canvasStore.blockGroup = jsonData.blockGroup;
      canvasStore.tips = "成功导入块组";
    } else {
      canvasStore.tips = "文件错误";
    }
  };
};

/** 导出 */
const onLeadOutJSON = () => {
 // console.log("导出");

  // ◆ 建立-保存时间
  let time = new Date();
  let Calendar: string =
    time.getFullYear() +
    "年" +
    time.getMonth() +
    "月" +
    time.getDate() +
    "日" +
    time.getHours() +
    "时" +
    time.getMinutes() +
    "分" +
    time.getSeconds() +
    "秒" +
    time.getMilliseconds() +
    "毫秒";
  let blockGroup = {
    calendar: Calendar,
    type: "blockGroup",
    blockGroup: canvasStore.blockGroup,
  };
 // console.log(CurrentProject)
  // 将JSON数据转换为Blob对象
  const blob = new Blob([JSON.stringify(blockGroup)], {
    type: "application/json;charset=utf-8",
  });
  // 使用FileSaver.js保存Blob对象为JSON文件
  saveAs(blob, "传鸿组态_块.json");
};

/**———————————————————————————————————————————————————————————————————————————————————————————————— */
//                                ★ 块操作
/**———————————————————————————————————————————————————————————————————————————————————————————————— */
/** 选择块 */
const onSelectedBlock = (Block: any) => {
 // console.log("★ 选择块")
 // console.log(Block)
  canvasStore.selectedBlock = Block; //选择的块
};
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
// 容器
.down_block {
  width: 100%;
  max-height: 250px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  background-color: rgb(80,80,80);
  overflow: hidden;
  user-select: none;

  //导航
  .down_block_left {
    width: 160px;
    height: 250px;
    overflow-y: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }

  //工具
  .down_block_tool {
    margin: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  //详情
  .down_block_right {
    width: 100%;
    height: 250px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    overflow-y: scroll;

    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }

  // 名称
  .h_block_neme {
    margin-top: 5px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .block_children {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-left: 100px;
    margin-top: 5px;
  }
}
</style>
